<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('circle_activity_23')"></navbar>
        <div class="content-noBottom">
            <div class="activity-detail">
                <div class="activity-info">
                    <div class="activity-title">{{ data.wcaTheme }}</div>
                    <div class="activity-content">
                        <div>{{ $t('circle_activity_12') }}：<span>{{ data.wcaEnrollEndDatetime }}</span></div>
                        <div>{{ $t('circle_activity_5') }}：<span>{{ $t('circle_activity_6', {'value1': data.wcaStartDatetime, 'value2': data.wcaEndDatetime}) }}</span></div>
                        <div>{{ $t('circle_activity_7') }}：<span>{{ data.wcaLocale }}</span></div>
                        <div>{{ $t('circle_activity_13') }}：<span>{{ $t('circle_activity_14', {'value': data.wcaFunds}) }}</span></div>
                        <div>{{ $t('circle_activity_15') }}：<span>{{ $t('circle_activity_10', {'value': data.wcaPeopleCount}) }}</span></div>
                    </div>
                    <div class="activity-create">
                        <span>{{ $t('circle_activity_16', {'value': data.enrollPeopleCount}) }}</span>
                        <span>{{ $t('circle_activity_11', {'value1': data.authorName, 'value2': data.wcaCreateDatetime}) }}</span>
                    </div>
                </div>
                <div class="activity-desc">
                    <div>{{ $t('circle_activity_17') }}</div>
                    <div class="activity-text">{{ data.wcaDesc }}</div>
                </div>
                <div class="activity-status" v-if="$store.state.circle.circleRole !== 'VISITOR'">
                    <van-button type="info" size="normal" v-if="!data.currUserEnrolled && data.status === 'ENROLLING'" @click="signUpHandle(true)">{{ $t('circle_activity_18') }}</van-button>
                    <van-button type="danger" size="normal" v-else-if="data.currUserEnrolled && data.status !== 'END'" @click="signUpHandle(false)">{{ $t('circle_activity_19') }}</van-button>
<!--                    <van-button type="info" size="normal" v-else-if="!data.currUserEnrolled && data.status === 'ENROLLING'" disabled>进行中</van-button>-->
                    <van-button type="info" size="normal" v-else disabled>{{ $t('circle_activity_9') }}</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Button, Toast } from 'vant';
export default {
    name: 'ActivityDetail',
    components: {
        vanButton: Button,
        vanToast: Toast
    },
    data() {
        return {
            wcaId: this.$route.params.wcaId,
            data: {},
            isLoading: false
        };
    },
    methods: {
        signUpHandle(type) {
            if (!this.isLoading) {
                this.isLoading = true;
                if (type) {
                    this.$axios.post(`/app/api/trainee/work-circle/activity/member/${this.wcaId}`).then(res => {
                        Toast({message: this.$t('circle_activity_20'), forbidClick: true});
                        this.data.currUserEnrolled = true;
                        this.isLoading = false;
                    }).catch(err => {
                        // Toast({message: err.response.data.errCode});
                        Toast({message: err.response.data.errMsg, forbidClick: true});
                    });
                } else {
                    this.$axios.delete(`/app/api/trainee/work-circle/activity/member/${this.wcaId}`).then(res => {
                        Toast({message: this.$t('circle_activity_21'), forbidClick: true});
                        this.data.currUserEnrolled = false;
                        this.isLoading = false;
                    });
                }
            }
        },
        getActivityDetail() {
            this.$axios.get(`/app/api/trainee/work-circle/activity/detail/${this.wcaId}`).then(res => {
                if (res && res.data) {
                    this.data = res.data;
                }
            });
        }
    },
    created() {
        this.getActivityDetail();
    }
};
</script>

<style scoped lang="less">
    .activity-detail {
        .activity-info {
            margin: 10px 0;
            background: #fff;
            padding: 15px 15px;
            .activity-title {
                font-weight: 200;
                font-size: 14px;
                color: #000;
                padding-bottom: 10px;
                border-bottom: 1px #F7F7F7 solid;
            }
            .activity-content {
                font-size: 10px;
                color: #ACACAC;
                & > div {
                    margin-bottom: 8px;
                }
                & > div:first-child>span {
                    color: #0B7EF0;
                }
                & > div > span {
                    color: #797979;
                }
                padding: 10px 0;
                margin-bottom: 10px;
                border-bottom: 1px #F7F7F7 solid;
            }
            .activity-create {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 10px;
                color: #ACACAC;
            }
        }
        .activity-desc {
            color: #797979;
            font-size: 10px;
            &>div:first-child {
                padding: 0 15px;
                margin-bottom: 5px;
            }
            .activity-text {
                padding: 20px 15px;
                background: #fff;
            }
        }
        .activity-status {
            height: 100px;
            width: 100%;
            text-align: center;
            background: #fff;
            margin-top: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            /deep/.van-button--normal {
                padding: 0 30%;
            }
        }
    }
    /deep/.van-button--info{
        background-color: #075ebb;
        border: 1px solid #075ebb;
    }
</style>
